﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample, jqxNavigationBar's width and height properties are set to "100%" so the widget will fit to its container element.</title>
    <style type="text/css">
        .bookContainer
        {
            width: 500px;
        }
        .book
        {
            width: 105px;
            height: 215px;
            float: left;
            margin-left: 5px;
        }
    </style>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // content for different pages
            var Tolkien = '<div class="bookContainer"><div class="book"><img style="float: left" src="../../images/books/The Hobbit.JPG" /><i>The Hobbit</i></div><div class="book"><img src="../../images/books/The Lord of the Rings.jpg" /><i>The Lord of the Rings</i></div><div class="book"><img src="../../images/books/The Silmarillion.JPG" /><i>The Silmarillion</i></div></div>';
            var Brooks = '<div class="bookContainer"><div class="book"><img src="../../images/books/The Sword of Shannara.jpg" /><i>The Sword of Shannara</i></div><div class="book"><img src="../../images/books/The Elfstones of Shannara.jpg" /><i>The Elfstones of Shannara</i></div><div class="book"><img src="../../images/books/The Wishsong of Shannara.jpg" /><i>The Wishsong of Shannara</i></div><div class="book"><img src="../../images/books/Running with the Demon.jpg" /><i>Running with the Demon</i></div><div class="book"><img src="../../images/books/A Knight of the Word.jpg" /><i>A Knight of the Word</i></div><div class="book"><img src="../../images/books/Angel Fire East.jpg" /><i>Angel Fire East</i></div></div>';
            var Rowling = '<div class="bookContainer"><div class="book"><img src="../../images/books/Harry Potter and the Philosopher&apos;s Stone.jpg" /><i>Harry Potter and the Philosopher&apos;s Stone</i></div><div class="book"><img src="../../images/books/Harry Potter and the Chamber of Secrets.jpg" /><i>Harry Potter and the Chamber of Secrets</i></div><div class="book"><img src="../../images/books/Harry Potter and the Prisoner of Azkaban.jpg" /><i>Harry Potter and the Prisoner of Azkaban</i></div><div class="book"><img src="../../images/books/Harry Potter and the Goblet of Fire.jpg" /><i>Harry Potter and the Goblet of Fire</i></div><div class="book"><img src="../../images/books/Harry Potter and the Order of the Phoenix.jpg" /><i>Harry Potter and the Order of the Phoenix</i></div><div class="book"><img src="../../images/books/Harry Potter and the Half-Blood Prince.jpg" /><i>Harry Potter and the Half-Blood Prince</i></div><div class="book"><img src="../../images/books/Harry Potter and the Deathly Hallows.jpg" /><i>Harry Potter and the Deathly Hallows</i></div></div>';
            var Wells = '<div class="bookContainer"><div class="book"><img src="../../images/books/The Time Machine.JPG" /><i>The Time Machine</i></div><div class="book"><img src="../../images/books/The War of the Worlds.jpg" /><i>The War of the Worlds</i></div></div>';
            var Green = '<div class="bookContainer"><div class="book"><img src="../../images/books/Deathstalker.jpg" /><i>Deathstalker</i></div><div class="book"><img src="../../images/books/Deathstalker Rebellion.jpg" /><i>Deathstalker Rebellion</i></div><div class="book"><img src="../../images/books/Deathstalker War.jpg" /><i>Deathstalker War</i></div><div class="book"><img src="../../images/books/Deathstalker Honor.jpg" /><i>Deathstalker Honor</i></div><div class="book"><img src="../../images/books/Deathstalker Destiny.jpg" /><i>Deathstalker Destiny</i></div></div>';
            var Lovecraft = '<div class="bookContainer"><div class="book"><img src="../../images/books/The Call of Cthulhu.jpg" /><i>The Call of Cthulhu</i></div><div class="book"><img src="../../images/books/At the Mountains of Madness.jpg" /><i>At the Mountains of Madness</i></div></div>';
            var King = '<div class="bookContainer"><div class="book"><img src="../../images/books/Carrie.jpg" /><i>Carrie</i></div><div class="book"><img src="../../images/books/Night Shift.jpg" /><i>Night Shift</i></div><div class="book"><img src="../../images/books/It.jpg" /><i>It</i></div><div class="book"><img src="../../images/books/The Dark Half.jpg" /><i>The Dark Half</i></div></div>';

            $("#jqxNavigationBar").jqxNavigationBar({  height: "100%", width: "100%", expandMode: "singleFitHeight" });

            var themeClass = "jqx-widget-header" + theme;
            $("#header").addClass(themeClass);

            var booksNum = 0;
            var liElements = $("#jqxNavigationBar li");
            $(liElements).css({ "cursor": "pointer", "text-decoration": "underline" });
            $("#bookShelf").html(Tolkien);
            $(".book img").css("cursor", "pointer");
            $(".book img").click(function () {
                booksNum += 1;
                $("#text").html("Added " + booksNum + (booksNum == 1 ? " book" : " books") + " to shopping cart.");
            });
            $.each(liElements, function (index, value) {
                $("#jqxNavigationBar li:eq(" + index + ")").click(function () {
                    switch (index) {
                        case 0:
                            $("#bookShelf").html(Tolkien);
                            break;
                        case 1:
                            $("#bookShelf").html(Brooks);
                            break;
                        case 2:
                            $("#bookShelf").html(Rowling);
                            break;
                        case 3:
                            $("#bookShelf").html(Wells);
                            break;
                        case 4:
                            $("#bookShelf").html(Green);
                            break;
                        case 5:
                            $("#bookShelf").html(Lovecraft);
                            break;
                        case 6:
                            $("#bookShelf").html(King);
                            break;

                    };
                    $(".book img").css("cursor", "pointer");
                    $(".book img").click(function () {
                        booksNum += 1;
                        $("#text").html("Added " + booksNum + (booksNum == 1 ? " book" : " books") + " to shopping cart.");
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div style="width: 680px; height: 450px; border: none;">
        <div id="leftPanel" style="width: 225px; height: 100%; float: left;">
                <div id="jqxNavigationBar">
                    <div>
                        Fantasy</div>
                    <div>
                        <ul>
                            <li>J. R. R. Tolkien</li>
                            <li>Terry Brooks</li>
                            <li>J. K. Rowling</li>
                        </ul>
                    </div>
                    <div>
                        Science Fiction</div>
                    <div>
                        <ul>
                            <li>H. G. Wells</li>
                            <li>Simon R. Green</li>
                        </ul>
                    </div>
                    <div>
                        Horror</div>
                    <div>
                        <ul>
                            <li>H. P. Lovecraft</li>
                            <li>Stephen King</li>
                        </ul>
                    </div>
                </div>
        </div>
        <div style="width: 450px;  height: 100%; float: left;" id="rightPanel">
            <div id="rightPanelContent" class="jqx-widget-content">
            <div id="bookShelf" style="margin: 5px; width: 444px; height: 425px;">
            </div>
            <div id="shoppingCart" style="float: left; margin-left: 5px;">
                <img style="float: left;" width="16" height="16" src="../../images/shopping_cart.png" />
                <div id="text">
                    Shopping cart is empty.
                </div>
            </div>
                </div>
        </div>
    </div>
</body>
</html>
